<template>
    <div class="bgf manage1">
        <el-tabs v-model="param.type" @tab-change="getList(1)" >
            <el-tab-pane label="帮助中心" :name="1"></el-tab-pane>
            <!-- <el-tab-pane label="常见问题" :name="2"></el-tab-pane> -->
            <el-tab-pane label="用户协议" :name="3"></el-tab-pane>
            <!-- <el-tab-pane label="商家电商协议" :name="4"></el-tab-pane> -->
        </el-tabs>
        <el-form :inline="true" :model="param" class="from">

            <el-form-item label="创建时间：">
                <el-date-picker v-model="param.startTime" type="date" class="w206" placeholder="开始时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/> &nbsp; 至 &nbsp;
                <el-date-picker v-model="param.endTime" type="date" class="w206" placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
            </el-form-item> <br/>

            <el-form-item>
                <el-button type="primary" class="w115 " @click="getList()">搜索</el-button>
                &emsp;
                <el-button @click="rewrite" text type="primary" >
                    <el-icon :size="16"><refresh /></el-icon> &nbsp;重置筛选条件
                </el-button>
            </el-form-item>
        </el-form>

        <el-button v-show="param.type==1" type="primary" class="w115 marl20" @click=" $router.push({path:'/articleEdit/'+param.type})" >添加文章</el-button>

    </div>

    <div class="bgf mart20" v-loading="loading" >
        <el-table  :data="list" >
            <el-table-column prop="title" min-width="100" label="文章标题"  ></el-table-column>

            <el-table-column prop="sort" min-width="100" label="排序"  ></el-table-column>

            <el-table-column prop="browse" min-width="100" label="浏览量"  ></el-table-column>

            <el-table-column prop="createTime" min-width="160" label="创建时间"  ></el-table-column>

            <el-table-column fixed="right" label="操作" width="120" >
                <template #default="scope">
                    <el-button  @click=" $router.push({path:'/articleEdit/'+param.type, query:scope.row})" text type="primary">编辑</el-button>
                    <el-divider direction="vertical" />
                    <el-button  @click="delArticle(scope.row.articleId)" text type="primary">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="h70 pad20 flexab ">
            <p class="font10 cola4">共 {{total}} 条</p>
            <el-pagination
                v-model:currentPage="param.pageNumber"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="param.pageSize"
                layout=" sizes, prev , jumper , next"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            loading: false,
            param:{
                pageNumber:1,
                pageSize: 10,
                type : 1,
            },
            list:[],
            total:0,
        }
    },
    watch:{
        $route(val, old) {
            // console.log(old);
            if(old.name == 'articleEdit'){
                this.getList(1)
            }
        },
    },
    created(){
        this.getList()
    },
    methods:{

        // 删除
        delArticle(id){
            let that = this;

            that.$msgbox.confirm(
                "文章删除请谨慎操作，删除后将无法恢复，确定删除？",
                "删除文章",
                {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                }
            ).then(() => {
                that.$api.articleDelete({articleId:id}).then(res=>{
                    console.log(res);
                    if(res){
                        that.getList(1);
                        that.$message.success('删除成功');
                    }
                })
            }).catch(() => {});
        },

        // 重置
        rewrite(){
            let that = this;
            let obj = {
                type: that.param.type,
                pageNumber: that.param.pageNumber,
                pageSize: that.param.pageSize,
            }
            that.param = obj;
        },

        getList(pageNumber){
            let that = this;
            if(pageNumber){
                that.param.pageNumber = pageNumber;
            }
            that.loading = true;
            console.log(this.param,'this.param=====')
            that.$api.articleList(this.param).then(res=>{
                console.log(res);
                if(res){
                    this.list = res.records
                    this.total = res.total;
                }
                that.loading = false;
            })
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.param.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.param.pageNumber = val;
            this.getList();
        },
    }
}
</script>
<style lang="scss" scoped>
.manage1{
    overflow: hidden;
    padding-bottom: 20px;
    .from{
        background: #F2F3F5;
        padding: 24px 16px 4px;
        margin: 8px 20px 20px;
    }
}
</style>